<template>
  <div>
    <a-card>
      <a-space>
        <a-input
          v-model:value="listQuery.appName"
          placeholder="输入条件app名字搜索"
          allow-clear
          @keyup.enter="handleFilter"
        />
        <a-input
          v-model:value="listQuery.clientId"
          placeholder="输入条件客户端ID搜索"
          allow-clear
          @keyup.enter="handleFilter"
        />
        <a-input
          v-model:value="listQuery.remark"
          placeholder="输入条件备注搜索"
          allow-clear
          @keyup.enter="handleFilter"
        />
        <a-button type="primary" :icon="h(SearchOutlined)" @click="handleFilter">搜索</a-button>
      </a-space>
    </a-card>
    <a-card class="mt-2">
      <a-button type="primary" class="mb-4" :icon="h(PlusOutlined)" @click="handleAdd">
        添加
      </a-button>
      <a-list item-layout="horizontal" :pagination="pagination" :data-source="data">

        <template #renderItem="{ item }">
          <a-list-item>
            <template #actions>
              <a-button size="small" type="link" @click="handleEdit(item)">编辑</a-button>
              <a-button size="small" type="link" danger @click="handleDelete(item)">删除</a-button>
            </template>
            <a-list-item-meta :title="item.appName">
              <template #avatar>
                <a-avatar :src="item.appIcon" />
              </template>
              <template #description>
               <div>
                 <div>
                   <a-tag color="#108ee9">{{item.appType}}</a-tag>
                   <a-tag color="#2db7f5">{{item.ssoAppGroup.name}}</a-tag>
                   <a-tag color="green" v-if="item.status==null||item.status==0">启用</a-tag>
                   <a-tag color="#f50" v-else>禁用</a-tag>
                 </div>

                 <div>{{item.remark}}</div>
               </div>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>

      </a-list>

    </a-card>
  </div>
</template>

<script setup lang="ts">
import { h, onMounted, reactive, ref } from 'vue';
import SsoAppApi from '@/api/SsoAppApi';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import router from "@/router";
let data = ref([]);
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  onChange: (current, pageSize) => {
    pagination.current = current;
    pagination.pageSize = pageSize;
    getList();
  },
});
onMounted(() => {
  getList();
});

const listQuery = reactive<any>({});

const tableLoading = ref(false);

function getList() {
  tableLoading.value = true;
  SsoAppApi.page({ index: pagination.current, size: pagination.pageSize, ...listQuery })
    .then((res) => {
      data.value = res.data;
      pagination.total = res.total;
    })
    .finally(() => (tableLoading.value = false));
}

function handleFilter() {
  pagination.current = 1;
  getList();
}

function handleEdit(row) {
  if (row.appType=='OIDC'){
    router.push({ name: 'OidcCreate',   query: { ssoAppId: row.ssoAppId}  })
  }
  if (row.appType==='JWT'){
    router.push({ name: 'JwtCreate',   query: { ssoAppId: row.ssoAppId}  })
  }
}

function handleAdd() {
  router.push({ name: 'AppCreate'})
}

function handleDelete(row) {
  Modal.confirm({
    title: '提示',
    content: '确定删除这条记录吗',
    onOk() {
      SsoAppApi.delete([row.ssoAppId]).then(() => {
        message.success('操作成功');
        getList();
      });
    },
    onCancel() {},
  });
}
</script>

<style scoped>
:deep(.ant-list .ant-list-item .ant-list-item-meta){
  align-items: center !important;
}
</style>
